<template>
  <div class="admin-photos">
    <div class="page-header">
      <h2>摄影作品资源库</h2>
      <el-button type="primary" icon="el-icon-plus" @click="uploadDialogVisible = true">添加作品</el-button>
    </div>
    
    <el-card class="filter-card" shadow="hover">
      <div class="filter-container">
        <div class="main-filters">
          <el-tabs v-model="activeTab" @tab-click="handleTabChange">
            <el-tab-pane label="全部作品" name="all"></el-tab-pane>
            <el-tab-pane label="手机摄影" name="mobile"></el-tab-pane>
            <el-tab-pane label="相机摄影" name="camera"></el-tab-pane>
            <el-tab-pane label="待审核" name="pending"></el-tab-pane>
          </el-tabs>
        </div>
        
        <div class="search-filters">
          <el-input
            v-model="listQuery.title"
            placeholder="作品标题"
            style="width: 200px"
            class="filter-item"
            clearable
            prefix-icon="el-icon-search"
            @keyup.enter.native="handleFilter">
          </el-input>
          
          <el-select v-model="listQuery.status" placeholder="作品状态" clearable class="filter-item">
            <el-option label="全部状态" :value="undefined"></el-option>
            <el-option label="待审核" :value="0"></el-option>
            <el-option label="已上线" :value="1"></el-option>
            <el-option label="已下线" :value="2"></el-option>
          </el-select>
          
          <el-select v-model="listQuery.isWinning" placeholder="获奖状态" clearable class="filter-item">
            <el-option label="全部作品" :value="undefined"></el-option>
            <el-option label="获奖作品" :value="1"></el-option>
            <el-option label="非获奖作品" :value="0"></el-option>
          </el-select>
          
          <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetFilter">重置</el-button>
        </div>
      </div>
    </el-card>
    
    <div class="content-container">
      <div class="view-toggle">
        <span>视图切换：</span>
        <el-radio-group v-model="viewMode" size="small">
          <el-radio-button label="table">表格视图</el-radio-button>
          <el-radio-button label="card">卡片视图</el-radio-button>
        </el-radio-group>
        
        <div class="bulk-actions">
          <el-button 
            type="success" 
            size="small" 
            icon="el-icon-check" 
            :disabled="!selectedPhotos.length"
            @click="handleBulkApprove">
            批量通过
          </el-button>
          <el-button 
            type="danger" 
            size="small" 
            icon="el-icon-close" 
            :disabled="!selectedPhotos.length"
            @click="handleBulkReject">
            批量拒绝
          </el-button>
          <el-button 
            type="warning" 
            size="small" 
            icon="el-icon-medal"
            :disabled="!selectedPhotos.length" 
            @click="awardDialogVisible = true">
            设置获奖
          </el-button>
        </div>
      </div>
      
      <!-- 表格视图 -->
      <el-card shadow="hover" v-if="viewMode === 'table'">
        <el-table
          :data="photoList"
          border
          fit
          highlight-current-row
          style="width: 100%"
          @selection-change="handleSelectionChange">
          
          <el-table-column type="selection" width="55"></el-table-column>
          
          <el-table-column label="ID" prop="id" align="center" width="80"></el-table-column>
          
          <el-table-column label="缩略图" width="120" align="center">
            <template slot-scope="{row}">
              <el-image 
                style="width: 80px; height: 80px"
                :src="row.imgUrl" 
                :preview-src-list="[row.imgUrl]">
              </el-image>
            </template>
          </el-table-column>
          
          <el-table-column label="标题" prop="title" align="center"></el-table-column>
          
          <el-table-column label="作者" prop="author" align="center" width="100"></el-table-column>
          
          <el-table-column label="类型" align="center" width="100">
            <template slot-scope="{row}">
              <el-tag :type="row.type === 1 ? 'success' : 'primary'">
                {{ row.type === 1 ? '手机摄影' : '相机摄影' }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column label="评分/投票" align="center" width="100">
            <template slot-scope="{row}">
              <div>{{ row.score.toFixed(1) }} / {{ row.voteCount }}</div>
            </template>
          </el-table-column>
          
          <el-table-column label="获奖状态" align="center" width="120">
            <template slot-scope="{row}">
              <el-tag v-if="row.isWinning" type="warning">
                {{ row.awardLevel || '获奖' }}
              </el-tag>
              <span v-else>-</span>
            </template>
          </el-table-column>
          
          <el-table-column label="状态" align="center" width="100">
            <template slot-scope="{row}">
              <el-tag :type="statusTagType(row.status)">
                {{ statusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column label="创建时间" align="center" width="170">
            <template slot-scope="{row}">
              {{ formatTime(row.createTime) }}
            </template>
          </el-table-column>
          
          <el-table-column label="操作" align="center" width="250">
            <template slot-scope="{row}">
              <el-button
                v-if="row.status === 0"
                size="mini"
                type="success"
                @click="handleUpdateStatus(row, 1)">
                通过
              </el-button>
              
              <el-button
                v-if="row.status === 0"
                size="mini"
                type="danger"
                @click="handleUpdateStatus(row, 2)">
                拒绝
              </el-button>
              
              <el-button
                v-if="row.status === 1"
                size="mini"
                type="warning"
                @click="handleUpdateStatus(row, 2)">
                下线
              </el-button>
              
              <el-button
                v-if="row.status === 2"
                size="mini"
                type="info"
                @click="handleUpdateStatus(row, 1)">
                上线
              </el-button>
              
              <el-dropdown trigger="click" @command="(cmd) => handleCommand(cmd, row)">
                <el-button type="text" size="mini">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="detail">查看详情</el-dropdown-item>
                  <el-dropdown-item command="award">设置获奖</el-dropdown-item>
                  <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      
      <!-- 卡片视图 -->
      <div v-else class="card-view">
        <el-checkbox-group v-model="selectedPhotos" class="photo-grid">
          <el-checkbox 
            v-for="photo in photoList" 
            :key="photo.id" 
            :label="photo.id"
            class="photo-item">
            <el-card shadow="hover" class="photo-card">
              <div class="card-image-container">
                <el-image 
                  :src="photo.imgUrl" 
                  fit="cover"
                  :preview-src-list="[photo.imgUrl]">
                </el-image>
                <div class="photo-status">
                  <el-tag :type="statusTagType(photo.status)" size="small">
                    {{ statusText(photo.status) }}
                  </el-tag>
                </div>
                <div class="award-badge" v-if="photo.isWinning">
                  <i class="el-icon-trophy"></i> {{ photo.awardLevel || '获奖' }}
                </div>
              </div>
              <div class="photo-info">
                <h3 class="photo-title">{{ photo.title }}</h3>
                <div class="photo-meta">
                  <span>
                    <i class="el-icon-user"></i> {{ photo.author }}
                  </span>
                  <el-tag size="small" :type="photo.type === 1 ? 'success' : 'primary'">
                    {{ photo.type === 1 ? '手机摄影' : '相机摄影' }}
                  </el-tag>
                </div>
                <div class="photo-stats">
                  <span>
                    <i class="el-icon-star-on"></i> {{ photo.score.toFixed(1) }}
                  </span>
                  <span>
                    <i class="el-icon-tickets"></i> {{ photo.voteCount }}
                  </span>
                  <span>
                    <i class="el-icon-view"></i> {{ photo.viewCount }}
                  </span>
                </div>
                <div class="photo-actions">
                  <el-button
                    v-if="photo.status === 0"
                    size="mini"
                    type="success"
                    icon="el-icon-check"
                    circle
                    @click.stop="handleUpdateStatus(photo, 1)">
                  </el-button>
                  <el-button
                    v-if="photo.status === 0"
                    size="mini"
                    type="danger"
                    icon="el-icon-close"
                    circle
                    @click.stop="handleUpdateStatus(photo, 2)">
                  </el-button>
                  <el-dropdown trigger="click" @command="(cmd) => handleCommand(cmd, photo)">
                    <el-button type="primary" size="mini" icon="el-icon-more" circle></el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="detail">查看详情</el-dropdown-item>
                      <el-dropdown-item command="award">设置获奖</el-dropdown-item>
                      <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </el-card>
          </el-checkbox>
        </el-checkbox-group>
      </div>
      
      <div class="pagination-container">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.page"
          :page-size="listQuery.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    
    <!-- 获奖设置对话框 -->
    <el-dialog title="设置获奖状态" :visible.sync="awardDialogVisible" width="500px">
      <el-form :model="awardForm" label-width="100px">
        <el-form-item label="获奖状态">
          <el-switch v-model="awardForm.isWinning" active-text="获奖" inactive-text="非获奖"></el-switch>
        </el-form-item>
        <el-form-item label="获奖等级" v-if="awardForm.isWinning">
          <el-select v-model="awardForm.awardLevel" placeholder="请选择获奖等级" style="width: 100%">
            <el-option label="特等奖" value="特等奖"></el-option>
            <el-option label="一等奖" value="一等奖"></el-option>
            <el-option label="二等奖" value="二等奖"></el-option>
            <el-option label="三等奖" value="三等奖"></el-option>
            <el-option label="优秀奖" value="优秀奖"></el-option>
            <el-option label="入选奖" value="入选奖"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="awardDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAward">确 定</el-button>
      </span>
    </el-dialog>
    
    <!-- 作品详情对话框 -->
    <el-dialog title="作品详情" :visible.sync="detailDialogVisible" width="800px">
      <div v-if="currentPhoto" class="photo-detail">
        <div class="photo-detail-image">
          <el-image :src="currentPhoto.imgUrl" fit="contain"></el-image>
        </div>
        <div class="photo-detail-info">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="作品名称">{{ currentPhoto.title }}</el-descriptions-item>
            <el-descriptions-item label="作者">{{ currentPhoto.author }}</el-descriptions-item>
            <el-descriptions-item label="类型">
              {{ currentPhoto.type === 1 ? '手机摄影' : '相机摄影' }}
            </el-descriptions-item>
            <el-descriptions-item label="描述">{{ currentPhoto.description || '暂无描述' }}</el-descriptions-item>
            <el-descriptions-item label="平均评分">{{ currentPhoto.score.toFixed(1) }}</el-descriptions-item>
            <el-descriptions-item label="投票数">{{ currentPhoto.voteCount }}</el-descriptions-item>
            <el-descriptions-item label="浏览量">{{ currentPhoto.viewCount }}</el-descriptions-item>
            <el-descriptions-item label="获奖状态">
              <span v-if="currentPhoto.isWinning">{{ currentPhoto.awardLevel || '获奖' }}</span>
              <span v-else>未获奖</span>
            </el-descriptions-item>
            <el-descriptions-item label="状态">{{ statusText(currentPhoto.status) }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ formatTime(currentPhoto.createTime) }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-dialog>
    
    <!-- 添加作品对话框 -->
    <el-dialog
      title="添加作品"
      :visible.sync="uploadDialogVisible"
      width="600px">
      <el-form :model="uploadForm" :rules="uploadRules" ref="uploadForm" label-width="100px">
        <el-form-item label="作品图片" prop="imgUrl">
          <div class="manual-upload">
            <input 
              type="file" 
              ref="fileInput" 
              style="display: none" 
              accept="image/jpeg,image/png"
              @change="handleFileChange"
            />
            <div 
              class="upload-box" 
              @click="$refs.fileInput.click()"
            >
              <img v-if="uploadForm.imgUrl" :src="uploadForm.imgUrl" class="upload-image">
              <i v-else class="el-icon-plus upload-icon"></i>
            </div>
            <div class="el-upload__tip">建议上传高质量的图片，JPG/PNG格式，大小不超过5MB</div>
          </div>
        </el-form-item>
        
        <el-form-item label="作品标题" prop="title">
          <el-input v-model="uploadForm.title" placeholder="请输入作品标题"></el-input>
        </el-form-item>
        
        <el-form-item label="作者" prop="author">
          <el-input v-model="uploadForm.author" placeholder="请输入作者姓名"></el-input>
        </el-form-item>
        
        <el-form-item label="作品类型" prop="type">
          <el-radio-group v-model="uploadForm.type">
            <el-radio :label="1">手机摄影</el-radio>
            <el-radio :label="2">相机摄影</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="作品描述" prop="description">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入作品描述"
            v-model="uploadForm.description">
          </el-input>
        </el-form-item>
        
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="uploadForm.status">
            <el-radio :label="0">待审核</el-radio>
            <el-radio :label="1">直接上线</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload" :loading="uploading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AdminPhotos',
  data() {
    return {
      photoList: [],
      total: 0,
      listLoading: false,
      activeTab: 'all',
      viewMode: 'table',
      selectedPhotos: [],
      currentPhoto: null,
      listQuery: {
        page: 1,
        pageSize: 10,
        title: '',
        type: undefined,
        status: undefined,
        isWinning: undefined
      },
      awardDialogVisible: false,
      detailDialogVisible: false,
      awardForm: {
        ids: [],
        isWinning: true,
        awardLevel: ''
      },
      uploadDialogVisible: false,
      uploading: false,
      uploadForm: {
        title: '',
        author: '',
        type: 1,
        description: '',
        imgUrl: '',
        status: 0
      },
      uploadRules: {
        title: [
          { required: true, message: '请输入作品标题', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入作者姓名', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择作品类型', trigger: 'change' }
        ],
        imgUrl: [
          { required: true, message: '请上传作品图片', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  computed: {
    token() {
      return localStorage.getItem('token')
    }
  },
  methods: {
    async getList() {
      this.listLoading = true
      try {
        const params = { ...this.listQuery }
        const res = await this.$http.get('/photos/page', { params })
        if (res.data.code === 1) {
          this.photoList = res.data.data.records
          this.total = res.data.data.total
        } else {
          this.$message.error('获取作品列表失败')
        }
      } catch (error) {
        console.error('获取作品列表失败', error)
        this.$message.error('获取作品列表失败')
      } finally {
        this.listLoading = false
      }
    },
    handleTabChange() {
      // 设置对应的过滤条件
      switch (this.activeTab) {
        case 'mobile':
          this.listQuery.type = 1
          this.listQuery.status = undefined
          break
        case 'camera':
          this.listQuery.type = 2
          this.listQuery.status = undefined
          break
        case 'pending':
          this.listQuery.status = 0
          this.listQuery.type = undefined
          break
        default:
          this.listQuery.type = undefined
          this.listQuery.status = undefined
      }
      
      this.listQuery.page = 1
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetFilter() {
      this.listQuery = {
        page: 1,
        pageSize: 10,
        title: '',
        type: undefined,
        status: undefined,
        isWinning: undefined
      }
      this.activeTab = 'all'
      this.getList()
    },
    handleCurrentChange() {
      this.getList()
    },
    handleSelectionChange(selection) {
      this.selectedPhotos = selection.map(item => item.id)
    },
    async handleUpdateStatus(row, status) {
      try {
        const res = await this.$http.put('/photos/status', {
          id: row.id,
          status
        })
        if (res.data.code === 1) {
          this.$message.success('更新状态成功')
          // 更新本地数据
          const index = this.photoList.findIndex(item => item.id === row.id)
          if (index !== -1) {
            this.photoList[index].status = status
          }
        } else {
          this.$message.error(res.data.msg || '更新状态失败')
        }
      } catch (error) {
        console.error('更新状态失败', error)
        this.$message.error('更新状态失败')
      }
    },
    async handleDelete(row) {
      this.$confirm('确认删除该作品吗？', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          const res = await this.$http.delete(`/photos/${row.id}`)
          if (res.data.code === 1) {
            this.$message.success('删除成功')
            this.getList()
          } else {
            this.$message.error(res.data.msg || '删除失败')
          }
        } catch (error) {
          console.error('删除作品失败', error)
          this.$message.error('删除失败')
        }
      }).catch(() => {})
    },
    handleCommand(command, row) {
      switch (command) {
        case 'detail':
          this.currentPhoto = row
          this.detailDialogVisible = true
          break
        case 'award':
          this.awardForm.ids = [row.id]
          this.awardForm.isWinning = !!row.isWinning
          this.awardForm.awardLevel = row.awardLevel || ''
          this.awardDialogVisible = true
          break
        case 'delete':
          this.handleDelete(row)
          break
      }
    },
    handleBulkApprove() {
      if (this.selectedPhotos.length === 0) {
        this.$message.warning('请选择作品')
        return
      }
      
      this.$confirm(`确认批量通过${this.selectedPhotos.length}个作品吗？`, '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          // 这里需要后端提供批量更新接口
          const res = await this.$http.put('/photos/bulk-status', {
            ids: this.selectedPhotos,
            status: 1
          })
          if (res.data.code === 1) {
            this.$message.success('批量通过成功')
            this.getList()
          } else {
            this.$message.error(res.data.msg || '批量操作失败')
          }
        } catch (error) {
          console.error('批量操作失败', error)
          this.$message.error('批量操作失败')
        }
      }).catch(() => {})
    },
    handleBulkReject() {
      if (this.selectedPhotos.length === 0) {
        this.$message.warning('请选择作品')
        return
      }
      
      this.$confirm(`确认批量拒绝${this.selectedPhotos.length}个作品吗？`, '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          // 这里需要后端提供批量更新接口
          const res = await this.$http.put('/photos/bulk-status', {
            ids: this.selectedPhotos,
            status: 2
          })
          if (res.data.code === 1) {
            this.$message.success('批量拒绝成功')
            this.getList()
          } else {
            this.$message.error(res.data.msg || '批量操作失败')
          }
        } catch (error) {
          console.error('批量操作失败', error)
          this.$message.error('批量操作失败')
        }
      }).catch(() => {})
    },
    submitAward() {
      if (this.awardForm.ids.length === 0) {
        this.$message.warning('请选择作品')
        return
      }
      
      if (this.awardForm.isWinning && !this.awardForm.awardLevel) {
        this.$message.warning('请选择获奖等级')
        return
      }
      
      this.$confirm(`确认${this.awardForm.isWinning ? '设置' : '取消'}获奖状态吗？`, '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          // 这里需要后端提供设置获奖接口
          const res = await this.$http.put('/photos/award', {
            ids: this.awardForm.ids,
            isWinning: this.awardForm.isWinning ? 1 : 0,
            awardLevel: this.awardForm.isWinning ? this.awardForm.awardLevel : null
          })
          if (res.data.code === 1) {
            this.$message.success('设置获奖状态成功')
            this.awardDialogVisible = false
            this.getList()
          } else {
            this.$message.error(res.data.msg || '设置获奖状态失败')
          }
        } catch (error) {
          console.error('设置获奖状态失败', error)
          this.$message.error('设置获奖状态失败')
        }
      }).catch(() => {})
    },
    statusText(status) {
      const map = {
        0: '待审核',
        1: '已上线',
        2: '已下线'
      }
      return map[status] || '未知'
    },
    statusTagType(status) {
      const map = {
        0: 'warning',
        1: 'success',
        2: 'info'
      }
      return map[status] || ''
    },
    formatTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return date.toLocaleString()
    },
    handleFileChange(event) {
      const file = event.target.files[0]
      if (!file) return
      
      const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPGOrPNG) {
        this.$message.error('只能上传JPG或PNG格式的图片!')
        return
      }
      if (!isLt5M) {
        this.$message.error('图片大小不能超过5MB!')
        return
      }
      
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        this.uploadForm.imgUrl = reader.result
        this.$message.success('图片准备就绪')
      }
    },
    submitUpload() {
      this.$refs.uploadForm.validate(async (valid) => {
        if (valid) {
          this.uploading = true
          try {
            // 准备FormData对象
            const formData = new FormData()
            // 将base64图片数据转换为blob
            const base64Data = this.uploadForm.imgUrl.split(',')[1]
            const blob = this.base64ToBlob(base64Data, 'image/jpeg')
            formData.append('file', blob, 'photo.jpg')
            
            // 先上传图片
            const uploadRes = await this.$http.post('/photos/upload', formData)
            if (uploadRes.data.code === 1) {
              this.$message.success('图片上传成功')
              // 图片上传成功后提交作品信息
              const photoData = {
                title: this.uploadForm.title,
                author: this.uploadForm.author,
                type: this.uploadForm.type,
                description: this.uploadForm.description,
                status: this.uploadForm.status,
                imgUrl: uploadRes.data.data // 使用返回的图片URL
              }
              
              try {
                const res = await this.$http.post('/photos', photoData)
                if (res.data.code === 1) {
                  this.$message.success('添加作品成功')
                  this.uploadDialogVisible = false
                  this.resetUploadForm()
                  this.getList()
                } else {
                  this.$message.error(res.data.msg || '添加作品失败')
                }
              } catch (error) {
                console.error('添加作品失败', error)
                this.$message.error('添加作品信息失败: ' + (error.response?.data?.msg || error.message || '未知错误'))
              }
            } else {
              this.$message.error(uploadRes.data.msg || '图片上传失败')
            }
          } catch (error) {
            console.error('上传过程失败', error)
            this.$message.error('上传失败: ' + (error.response?.data?.msg || error.message || '未知错误'))
          } finally {
            this.uploading = false
          }
        } else {
          return false
        }
      })
    },
    
    base64ToBlob(base64, mimeType) {
      const byteCharacters = atob(base64)
      const byteArrays = []
      
      for (let offset = 0; offset < byteCharacters.length; offset += 512) {
        const slice = byteCharacters.slice(offset, offset + 512)
        const byteNumbers = new Array(slice.length)
        
        for (let i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i)
        }
        
        const byteArray = new Uint8Array(byteNumbers)
        byteArrays.push(byteArray)
      }
      
      return new Blob(byteArrays, { type: mimeType })
    },
    resetUploadForm() {
      this.uploadForm = {
        title: '',
        author: '',
        type: 1,
        description: '',
        imgUrl: '',
        status: 0
      }
      if (this.$refs.uploadForm) {
        this.$refs.uploadForm.resetFields()
      }
    }
  }
}
</script>

<style scoped>
.admin-photos {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h2 {
  margin: 0 0 10px;
  color: #34495e;
  font-size: 24px;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-container {
  display: flex;
  flex-direction: column;
}

.main-filters {
  margin-bottom: 20px;
}

.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.filter-item {
  margin-right: 10px;
  margin-bottom: 10px;
}

.content-container {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.view-toggle {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: space-between;
}

.bulk-actions {
  display: flex;
  gap: 10px;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.photo-card {
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
}

.photo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.card-image-container {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.el-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-status {
  position: absolute;
  top: 10px;
  left: 10px;
}

.award-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #f39c12;
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.photo-info {
  padding: 15px;
}

.photo-title {
  margin: 0 0 10px;
  font-size: 16px;
  color: #34495e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.photo-stats {
  display: flex;
  justify-content: space-between;
  color: #7f8c8d;
  margin-bottom: 15px;
  font-size: 14px;
}

.photo-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.pagination-container {
  text-align: center;
  margin-top: 20px;
}

.photo-detail {
  display: flex;
  gap: 20px;
}

.photo-detail-image {
  flex: 1;
  max-width: 50%;
}

.photo-detail-info {
  flex: 1;
}

@media (max-width: 768px) {
  .search-filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-item {
    width: 100%;
    margin-right: 0;
  }
  
  .photo-detail {
    flex-direction: column;
  }
  
  .photo-detail-image {
    max-width: 100%;
  }
}

.upload-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.upload-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
}

.photo-uploader {
  text-align: center;
}

.manual-upload {
  text-align: center;
}

.upload-box {
  display: inline-block;
  cursor: pointer;
}

.upload-icon:hover {
  border-color: #409EFF;
}
</style> 